<template>
  <div class="quest-info">
    <div v-if="quest.error">
      <el-form size="mini">
        <el-form-item label="上一个错误">
          <span>{{ quest.error }}</span>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="quest.type == 2 || quest.type == 3">
      <el-form size="mini">
        <el-form-item :label="types[quest.type] + '名称'">
          <span>{{ quest.method }}</span>
        </el-form-item>
      </el-form>
      <div class="form-title">{{ types[quest.type] }}参数</div>
      <el-form class="indent" size="mini">
        <el-form-item
          v-for="(config, name) in quest.config"
          :key="name"
          :label="name">
          <span>{{ config }}</span>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="quest.type == 4">
      <el-form size="mini">
        <el-form-item label="评估对象">
          <span>{{ evalTypes[quest.evalType] }}</span>
        </el-form-item>
      </el-form>
      <div v-if="evalAttacks">
        <div class="form-title">攻击任务</div>
        <el-form class="indent" size="mini">
          <el-form-item v-for="{ id, quest } in evalAttacks" :key="id" :label="`#${id}`">
            <span v-if="quest">
              {{ quest.method }} - {{ quest.desc }}
            </span>
            <span v-else>任务不存在</span>
          </el-form-item>
        </el-form>
        <div class="form-title">攻击参数修改</div>
        <el-form class="indent" size="mini">
          <el-form-item v-for="{ id, key, value } in quest.evalAttackChanges" :key="id" :label="`#${id}`">
            <span>{{ key }} : {{ value }}</span>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="evalDefenses">
        <div class="form-title">防御任务</div>
        <el-form class="indent" size="mini">
          <el-form-item v-for="{ id, quest } in evalDefenses" :key="id" :label="`#${id}`">
            <span v-if="quest">
              {{ quest.method }} - {{ quest.desc }}
            </span>
            <span v-else>任务不存在</span>
          </el-form-item>
        </el-form>
        <div class="form-title">防御参数修改</div>
        <el-form class="indent" size="mini">
          <el-form-item v-for="{ id, key, value } in quest.evalDefenseChanges" :key="id" :label="`#${id}`">
            <span>{{ key }} : {{ value }}</span>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    quest: Object,
    queue: Array
  },
  data() {
    return {
      types: ['训练', '选取攻击目标', '攻击', '防御', '评估'],
      evalTypes: ['攻击', '防御', '攻防']
    }
  },
  computed: {
    evalAttacks() {
      if (!this.quest.evalAttacks) {
        return
      }
      return this.quest.evalAttacks.map(id => ({ id, quest: this.queue.find(q => q.id == id) }))
    },
    evalDefenses() {
      if (!this.quest.evalDefenses) {
        return
      }
      return this.quest.evalDefenses.map(id => ({ id, quest: this.queue.find(q => q.id == id) }))
    }
  }
}
</script>

<style scoped>
.form-title {
  margin-bottom: 18px;
}

.indent {
  margin-left: 30px;
}
</style>
